<template>
    <div class="page">
        <z-page-header title="用户管理" subTitle="运维人员管理"></z-page-header>
        <div class="page-content">
            <z-table :table-columns="tableColumns" :table-data="tableData" :page-info="pageInfo"
                :pagination="pagination" @page-number-change="pageNumberChange" @page-size-change="pageSizeChange"
                ref="dataTable" :table-loading='loading.tableLoading'>
                <div slot="search">
                    <Form :model="formValidate" :label-width="labelWidth" label-position="right" label-colon>
                        <Row :gutter="20">
                            <Col :xs="24" :sm="12" :md="6" :lg="6">
                            <FormItem label="姓名">
                                <Input v-model="formValidate.username" clearable></Input>
                            </FormItem>
                            </Col>
                            <Col :xs="24" :sm="12" :md="6" :lg="6">
                            <FormItem label="用户名">
                                <Input v-model="formValidate.realname" clearable></Input>
                            </FormItem>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="12" style="text-align:right">
                            <Button type="primary" :loading="loading.tableLoading" shape="circle"
                                @click="search">查询</Button>
                            <Button type="primary" shape="circle" style="margin-left:12px"
                                @click="addModal.show = true">添加</Button>
                            </Col>
                        </Row>
                    </Form>
                </div>
            </z-table>
        </div>
         <!-- 添加人员 -->
        <add-modal v-model="addModal.show"></add-modal>
    </div>
</template>
<script>
    import createColumns from './columns'
    import errHandler from "@/libs/err-handler";
     import AddModal from './addModal/index.vue'
    export default {
        name: 'user_manage',
        components: {
            AddModal
        },
        data() {
            return {
                gutter: 20,
                labelWidth: 100,
                addModal: {
                    show: false
                },
                formValidate: {
                    realname:"",
                    username: "",
                },
                tableColumns: createColumns(this),
                tableData: [],
                loading: {
                    loading: false,
                    tableLoading: false,
                },
                pagination: this.$constance.pagination,
                pageInfo: {
                    pageNumber: 1,
                    pageSize: this.$constance.pagination.pageSize,
                    total: 0,
                    totalPage: 10,
                    showTip: true
                },
            }
        },
        methods: {
            getDataList() {},
            // 添加成功后刷新数据
            refresh() {
                this.search()
            },
            search(noRerefsh) {
                if (!noRerefsh) {
                    this.pageInfo.pageNumber = 1;
                }
                this.getDataList();
            },
            // 对码分页器页码改变
            pageNumberChange(pageNumber) {
                this.pageInfo.pageNumber = pageNumber;
                this.search(true);
            },
            // 对码分页器分页条数改变
            pageSizeChange(pageSize) {
                this.pageInfo.pageSize = pageSize;
                this.search();
            },
        }
    }
</script>